<template>
    <div>
        <a-card class="headers">
            点位搜索：
            <a-input v-model:value="names" placeholder="请输入" style="width: 200px" />
            <a-button type="primary" style="margin-left: 10px" @click="getcooperativelist">
                <template #icon>
                    <SearchOutlined />
                </template>
                查询
            </a-button>
            区域搜索：
            <a-select v-model:value="areas" :size="size"  style="width: 200px"> 
                <a-select-option v-for="(i,index) in areadata " :key="index" :value="i._id">{{ i.name }}</a-select-option>
            </a-select>
            <a-button type="primary" style="margin-left: 10px" @click="getcooperativelist">
                <template #icon>
                    <SearchOutlined />
                </template>
                查询

            </a-button>
        </a-card>
        
        <!-- 表格 -->
        <a-card>
            <a-button type="primary" style="margin-bottom: 10px" @click="() => {
                visible = true
                shows = false
            }">
                <PlusCircleOutlined />
                新建
            </a-button>
            <a-table :rowKey="record => record._id" :columns="columns" :data-source="datas" :pagination="false">
                <template #action="{ record }">
                    <a>查看详情</a>
                    <a-divider type="vertical" />
                    <a @click="upt(record)">修改</a>
                    <a-divider type="vertical" />
                    <a style="color: red" @click="deldata(record._id)">删除</a>
                </template>
                <template #saobi="{ record }">
                    {{ record.ratio }}%
                </template>
            </a-table>
        </a-card>
        <!-- 分页 -->
        <div style="margin-top: 2.5vh; margin-bottom: 4vh" v-if="total > 8">
            <span style="color: #dbe5ef; font-size: 1rem; margin-left: 1rem">
                共{{ total }}条记录&nbsp;&nbsp;第 {{ page }}/{{
                    Math.ceil(total / pageSize)
                }}页
            </span>
            <span style="float: right">
                <span style="margin-right: 3vw">
                    <a-button style="background: #d5ddf8" :disabled="page <= 1" @click="onup">上一页</a-button>
                </span>
                <span style="margin-right: 4vw">
                    <a-button style="background: #d5ddf8" :disabled="page >= Math.ceil(total / pageSize)"
                        @click="ondown">下一页</a-button>
                </span>
            </span>
        </div>
        <!-- 对话框 -->
        <a-modal v-model:visible="visible" :title="shows ? '修改合作商' : '添加合作商'" :footer="null" @cancel="resetForm">
            <a-form ref="formRef" :model="formState" :rules="rules" :label-col="{ span: 6 }"
                :wrapper-col="{ span: 16 }">
                <a-form-item ref="name" label="点位名称" name="name">
                    <a-input v-model:value="formState.name"><template #suffix>
                            <span>{{ formState.name.length }}/10</span>
                        </template></a-input>
                </a-form-item>
                <a-form-item ref="area" label="选择区域 " name="area">
                    <a-select v-model:value="formState.area" :size="size"  style="width: 200px">  
                        <a-select-option v-for="(i,index) in areadata " :key="index" :value="i._id">{{ i.name }}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item ref="lei" label="所属商圈 " name="lei">
                    <a-select v-model:value="formState.lei" :size="size" style="width: 200px">  
                        <a-select-option :key="index" value="学校">学校</a-select-option>
                        <a-select-option :key="index" value="工厂">工厂</a-select-option>
                        <a-select-option :key="index" value="写字楼">写字楼</a-select-option>
                        <a-select-option :key="index" value="交通枢纽">交通枢纽</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item ref="cooperative" label="归属合作商 " name="cooperative">
                    <a-select v-model:value="formState.cooperative" :size="size"  style="width: 200px">  
                        <a-select-option v-for="(i,index) in cooperativedata " :key="index" :value="i._id">{{ i.name }}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item ref="di" label="地址 " name="di">
                    <a-cascader v-model:value="formState.di" :options="ChinaData" placeholder="请选择地址" />
                </a-form-item>
                <a-form-item ref="xidi" label="详细地址 " name="xidi">
                    <a-textarea v-model:value="formState.xidi"><template #suffix>
                            <span>{{ formState.xidi.length }}/100</span>
                        </template></a-textarea>
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" @click="onSubmit">{{ shows?'修改': '添加' }}</a-button>
                    <a-button style="margin-left: 10px" @click="resetForm">取消</a-button>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import { GetCooperativeList as areaList} from "@/api/tian/area"
import { GetCooperativeList as CooperativeLists } from "@/api/tian/dian"
import { GetCooperativeList , Deletes, DataAdd, DataPut } from "@/api/tian/pt"
import { message } from "ant-design-vue";
import { ChinaData } from './Data.js'
const visible = ref(false);
const shows = ref(false);
let datas = ref([])
let areadata = ref([])
let cooperativedata = ref([])
let names = ref("")
let areas = ref("")
let total = ref(0)
let page = ref(1)
let pageSize = ref(8)
// 添加表单
const formRef = ref("");
const formState = ref({
    name: '',
    area: "",
    lei: "",
    cooperative: "",
    di: [],
    xidi: "",
});

const rules = {
    name: [
        { required: true, message: '点位名称不能为空', trigger: 'blur' },
        { min: 3, max: 10, message: '最少字数为3最大字数为10', trigger: 'blur' },
    ],
    di: [ {
          type: 'array',
          required: true,
          message: '地址不能为空',
          trigger: 'change',
        },],
    lei: [
        { required: true, message: '商圈不能为空', trigger: 'blur' },
    ],
    cooperative: [
        { required: true, message: '商圈不能为空', trigger: 'blur' },
    ],
    area: [
        { required: true, message: '区域不能为空', trigger: 'blur' },
    ],
    xidi: [
        { required: true, message: '备注不能为空', trigger: 'blur' },
        { min: 3, max: 100, message: '最少字数为3最大字数为100', trigger: 'blur' },
    ],
}
const dataputs = async (i) => {
    let { data } = await DataPut(i)
    data.code === 200 ? message.success("添加成功") : message.error("添加失败")
}
const upt = (i) => {
    visible.value = true;
    shows.value = true
    formState.value = JSON.parse(JSON.stringify(i))
}
const dataadd = async (datas) => {
    let { data } = await DataAdd(datas)
    data.code === 200 ? message.success("添加成功") : message.error("添加失败")
}
const onSubmit = () => {
    formRef.value.validate().then(() => {
        if (shows.value) {
            dataputs(formState.value)
        } else {
            dataadd(formState.value)
        }
        visible.value = false
        getcooperativelist()
        resetForm();
    }).catch((error) => {
        console.log('error', error);
    });
};
const resetForm = () => {
    formState.value ={
    name: '',
    area: "",
    lei: "",
    cooperative: "",
    di: [],
    xidi: "",
}
    formRef.value.resetFields();
    visible.value = false
};
let getcooperativelist = async () => {
    let { data } = await GetCooperativeList({ name: names.value, page: page.value, pagesize: pageSize.value,area:areas.value })
    datas.value = data.data
    total.value = data.count
}
let getlistS = async () => {
    let { data } = await areaList({name:"",page:1,pagesize:5000})
    let datr= await CooperativeLists({name:"",page:1,pagesize:5000})
    areadata.value = data.data,
    cooperativedata.value=datr.data.data
}
// 上一页
const onup = () => {
    page.value--;
    getcooperativelist()
};
//  下一页
const ondown = () => {
    page.value++;
    getcooperativelist()
};

onMounted(() => {
    getcooperativelist()
    getlistS()
})
const deldata = async (id) => {
    console.log(id);
    let { data } = await Deletes(id);
    console.log(data);
    data.code === 200 ? message.success("删除成功") : message.error("删除失败");
    getcooperativelist();
};
const columns = [
    {
        title: "序号",
        dataIndex: "_id",
        key: "_id",
    },
    {
        title: "点位名称",
        dataIndex: "name",
        key: "_id",
    },
    {
        title: "所在区域",
        key: "action",
        dataIndex: "areaname",
    },
    {
        title: "商圈类型",
        key: "action",
        dataIndex: "lei",
    },
    {
        title: "合作商",
        key: "action",
        dataIndex: "cooperativename",
    },
    {
        title: "详细地址",
        key: "_id",
        dataIndex: "xidi",
    },

    {
        title: "操作",
        key: "action",
        slots: {
            customRender: "action",
        },
    },
];
</script>
<style scoped>

</style>